<template>
  <div class="teacher-home">
    <!-- 顶部操作栏 -->
    <div class="top-bar">
      <!-- <div class="user-info">
        <span>教师：{{ userInfo.name }}</span>
        <button class="change-pwd-btn" @click="showPasswordModal = true">修改密码</button>
      </div> -->
      <div class="actions">
        <button class="publish-btn" @click="showPublishModal = true">发布作业</button>
        <router-link to="/teacher/homeworks" class="manage-btn">作业管理</router-link>
        <router-link to="/teacher/students" class="manage-btn">学生管理</router-link>
        <router-link to="/teacher/classes" class="manage-btn">班级管理</router-link>
      </div>
    </div>
    
    <!-- 筛选区域 -->
    <div class="filter-bar">
      <div class="filter-group">
        <label>班级：</label>
        <select v-model="filters.class_id" @change="handleClassChange">
          <option value="">全部班级</option>
          <option v-for="cls in classes" :key="cls.id" :value="cls.id">
            {{ cls.className }}
          </option>
        </select>
      </div>
      <div class="filter-group">
        <label>作业：</label>
        <select v-model="filters.homework_id" @change="loadSubmissions">
          <option value="">全部作业</option>
          <option v-for="homework in homeworks" :key="homework.id" :value="homework.id">
            {{ homework.title }}
          </option>
        </select>
      </div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="content-wrapper">
      <!-- 左侧：作业提交列表 -->
      <div class="left-panel">
        <div class="panel-header">
          <h3>学生作业提交列表</h3>
        </div>
        <div class="submission-list">
          <table class="submission-table">
            <thead>
              <tr>
                <th>提交日期</th>
                <th>作业名称</th>
                <th>学生信息</th>
                <th>班级</th>
                <th>评分</th>
                <th>评价</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in submissions" :key="item.id">
                <td>{{ formatDate(item.submittedAt) }}</td>
                <td>{{ item.homework?.title || '未知作业' }}</td>
                <td>学号：{{ item.student?.username || '-' }}<br>姓名：{{ item.student?.name || '-' }}</td>
                <td>{{ item.student?.classInfo?.className || '未知班级' }}</td>
                <td class="score-cell">
                  <span class="score" :class="{ 'scored': item.score !== null }">
                    {{ item.score !== null ? item.score : '待评分' }}
                  </span>
                </td>
                <td class="comment-cell">
                  <div v-if="item.comment">
                    {{ item.comment.substring(0, 30) }}{{ item.comment.length > 30 ? '...' : '' }}
                  </div>
                  <div v-else class="no-comment">暂无评价</div>
                </td>
                <td>
                    <button class="view-btn" @click="viewSubmission(item)">查看</button>
                    <!-- <button class="grade-btn" @click="showGradeModal(item)">评分</button> -->
                    <!-- 退回按钮已移至查看详情页面 -->
                  </td>
              </tr>
            </tbody>
          </table>
          <div v-if="submissions.length === 0" class="empty-tip">暂无作业提交记录</div>
        </div>
      </div>
      
      <!-- 右侧：排名信息 -->
      <div class="right-panel">
        <!-- 班级学生列表 -->
        <div class="class-students-section" v-if="classStudents.length > 0">
          <h4>{{ getClassName(selectedClassId) }}学生列表</h4>
          <div class="students-grid">
            <div 
              v-for="student in classStudents" 
              :key="student.id"
              class="student-tag"
              :class="{ 'submitted': submittedStudentIds.has(student.id) }"
            >
              {{ student.name }}
              <span v-if="submittedStudentIds.has(student.id)" class="submitted-mark">✓</span>
            </div>
          </div>
        </div>
        
        <!-- 年级排名 -->
        <div class="rank-section">
          <h4>年级总分评分最高的10位学生</h4>
          <div class="rank-list">
            <div v-for="student in calculatedGradeRankings" :key="student.id" class="rank-item">
              <span class="rank-num">{{ student.displayRank }}</span>
              <span class="student-name">{{ student.name }}</span>
              <span class="student-class">{{ student.className || '未知班级' }}</span>
              <span class="total-score">{{ student.total_score }}</span>
            </div>
          </div>
        </div>
        
        <!-- 班级排名 -->
        <div class="rank-section">
          <h4>班级内的学生评分排名</h4>
          <div class="class-selector">
            <select v-model="selectedClassId" @change="loadClassRankings">
              <option value="" disabled>选择班级</option>
              <option v-for="cls in classes" :key="cls.id" :value="cls.id">
                {{ cls.className }}
              </option>
            </select>
          </div>
          <div class="rank-list" v-if="selectedClassId">
            <div v-for="student in calculatedClassRankings" :key="student.id" class="rank-item">
              <span class="rank-num">{{ student.displayRank }}</span>
              <span class="student-name">{{ student.name }}</span>
              <span class="total-score">{{ student.total_score }}</span>
            </div>
          </div>
          <div v-else class="no-class-selected">请选择班级查看排名</div>
        </div>
      </div>
    </div>
    
    <!-- 发布作业弹窗 -->
    <div class="modal" v-if="showPublishModal" @click="closePublishModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>发布作业</h3>
          <button class="close-btn" @click="closePublishModal">×</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="publishHomework">
            <div class="form-group">
              <label>选择班级 *</label>
              <select v-model="publishForm.class_id" required>
                <option value="" disabled>请选择班级</option>
                <option v-for="cls in classes" :key="cls.id" :value="cls.id">
                  {{ cls.className }}
                </option>
              </select>
            </div>
            <div class="form-group">
              <label>作业名称 *</label>
              <input type="text" v-model="publishForm.name" required placeholder="请输入作业名称">
            </div>
            <div class="form-group">
              <label>作业要求</label>
              <textarea v-model="publishForm.content" rows="5" placeholder="请输入作业要求"></textarea>
            </div>
            <div class="form-group">
              <label>截止日期 (可选)</label>
              <input 
                type="datetime-local" 
                v-model="publishForm.deadline"
                placeholder="请选择截止日期"
              >
            </div>
            <div class="form-group">
              <label>上传附件 (可选)</label>
              <input type="file" @change="handlePublishFileChange" ref="publishFileInput">
              <div v-if="publishSelectedFile" class="selected-file">
                {{ publishSelectedFile.name }}
              </div>
            </div>
            <div class="form-group">
              <label>粘贴图片 (可选)</label>
              <div 
                class="paste-area"
                contenteditable
                @paste="handlePublishPaste"
                placeholder="在此处粘贴图片"
              ></div>
              <div v-if="publishPastedImages.length > 0" class="pasted-images">
                <img 
                  v-for="(img, index) in publishPastedImages" 
                  :key="index" 
                  :src="img" 
                  class="pasted-img"
                >
              </div>
            </div>
            <div class="modal-footer">
              <button type="submit" class="submit-btn">发布</button>
              <button type="button" class="cancel-btn" @click="closePublishModal">取消</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    
    <!-- 评分弹窗 -->
    <div class="modal" v-if="showGradeModalFlag" @click="closeGradeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>评分 - {{ currentSubmission?.student?.name || currentSubmission?.student_name || '未知学生' }}</h3>
          <button class="close-btn" @click="closeGradeModal">×</button>
        </div>
        <div class="modal-body">
          <div class="submission-detail">
            <p><strong>作业名称：</strong>{{ currentSubmission?.homework_name }}</p>
            <p><strong>提交内容：</strong></p>
            <div class="content-display" v-if="currentSubmission?.content">
              {{ currentSubmission.content }}
            </div>
            <div v-if="currentSubmission?.file_path" class="file-link">
              <a :href="getFilePath(currentSubmission.file_path)" target="_blank">查看附件</a>
            </div>
          </div>
          <form @submit.prevent="saveGrade">
            <div class="form-group">
              <label>评分 (0-5分) *</label>
              <input 
                type="number" 
                v-model.number="gradeForm.score" 
                required 
                min="0" 
                max="5" 
                step="0.5"
              >
            </div>
            <div class="form-group">
              <label>评价</label>
              <textarea v-model="gradeForm.comment" rows="3" placeholder="请输入评价内容"></textarea>
            </div>
            <div class="modal-footer">
              <button type="submit" class="submit-btn">保存</button>
              <button type="button" class="cancel-btn" @click="closeGradeModal">取消</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- 作业查看模态框 -->
    <div class="modal" v-if="showViewModal" @click="closeViewModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>作业详情 - {{ currentViewSubmission?.student?.name || currentViewSubmission?.student?.username || '未知学生' }}</h3>
          <button class="close-btn" @click="closeViewModal">×</button>
        </div>
        <div class="modal-body">
          <div class="submission-detail">
            <p><strong>作业名称：</strong>{{ currentViewSubmission?.homework?.title }}</p>
            <p><strong>学生姓名：</strong>{{ currentViewSubmission?.student?.name || '-' }}</p>
            <p><strong>学生学号：</strong>{{ currentViewSubmission?.student?.username || '-' }}</p>
            <p><strong>班级：</strong>{{ currentViewSubmission?.student?.classInfo?.className }}</p>
            <p><strong>提交时间：</strong>{{ formatDate(currentViewSubmission?.submittedAt) }}</p>
            <p><strong>提交内容：</strong></p>
            <div class="content-display" v-if="currentViewSubmission?.content">
              {{ currentViewSubmission.content }}
            </div>
            <div v-else class="no-comment">无提交内容</div>
            <div v-if="currentViewSubmission?.file_path" class="file-link">
              <a :href="getFilePath(currentViewSubmission.file_path)" target="_blank">查看附件</a>
            </div>
            <!-- 显示学生提交的图片 -->
            <div v-if="currentViewSubmission?.images && parseImages(currentViewSubmission.images).length > 0" class="submission-images">
              <p><strong>提交图片：</strong></p>
              <div class="images-preview">
                <img 
                  v-for="(image, index) in parseImages(currentViewSubmission.images)" 
                  :key="index" 
                  :src="image" 
                  class="preview-image" 
                  :alt="`提交图片 ${index + 1}`"
                  @click="viewImage(image)"
                >
              </div>
              <div class="image-tip">点击图片可放大查看</div>
            </div>
            <p v-if="currentViewSubmission?.score !== null"><strong>评分：</strong>{{ currentViewSubmission.score }}</p>
            <p v-if="currentViewSubmission?.comment"><strong>评价：</strong>{{ currentViewSubmission.comment }}</p>
          </div>
          
          <!-- 评分表单 -->
          <div class="grade-section" v-if="currentViewSubmission">
            <h4>评分与评价</h4>
            <form @submit.prevent="saveGradeFromView">
              <div class="form-group">
                <label>评分 *</label>
                <div class="score-options">
                  <label v-for="score in [0, 1, 2, 3, 4, 5]" :key="score" class="score-option">
                    <input 
                      type="radio" 
                      v-model="viewGradeForm.score" 
                      :value="score"
                      required
                    >
                    <span>{{ score }}分</span>
                  </label>
                </div>
                <!-- 评分文本框显示 -->
                <div class="form-group" style="margin-top: 10px;">
                  <label>已选评分：</label>
                  <input 
                    type="number" 
                    v-model="viewGradeForm.score" 
                    min="0" 
                    max="5" 
                    step="0.5"
                    style="width: 100px;"
                  >
                  <span>分</span>
                </div>
              </div>
              <div class="form-group">
                <label>评价</label>
                <div class="comment-options-row">
                  <div class="comment-options">
                    <button type="button" 
                      v-for="comment in ['完全符合', '总体符合', '不合题意']" 
                      :key="comment"
                      class="comment-option-btn"
                      @click="setCommentFromView(comment)"
                    >
                      {{ comment }}
                    </button>
                  </div>
                  <div class="action-buttons">
                    <button type="submit" class="submit-btn">保存评分</button>
                    <button type="button" class="cancel-btn" @click="closeViewModal">关闭</button>
                  </div>
                </div>
                <textarea 
                  v-model="viewGradeForm.comment" 
                  rows="3" 
                  placeholder="请输入评价内容或选择预设评价"
                ></textarea>
              </div>

            </form>
          </div>
          
          <!-- 退回作业功能 -->
          <div class="reject-section" v-if="currentViewSubmission && !currentViewSubmission.isRejectedRecord">
            <div class="section-divider"></div>
            <h4>退回作业</h4>
            <form @submit.prevent="saveRejectFromView">
              <div class="form-group">
                <label>退回原因类型</label>
                <div class="reject-options">
                  <label v-for="reason in rejectReasons" :key="reason.value" class="reject-option">
                    <input 
                      type="radio" 
                      v-model="selectedRejectReason" 
                      :value="reason.value"
                      @change="onRejectReasonChange"
                    >
                    <span>{{ reason.label }}</span>
                  </label>
                </div>
              </div>
              <div class="form-group">
                <label>退回原因 *</label>
                <textarea 
                  v-model="viewRejectForm.comment" 
                  rows="4" 
                  required
                  placeholder="请输入退回原因（学生将看到此内容）"
                ></textarea>
                <p class="form-tip">退回后，作业评分为0分，学生可以重新提交。</p>
              </div>
              <div class="modal-footer">
                <button type="submit" class="submit-btn reject-btn">确认退回</button>
                <button type="button" class="cancel-btn" @click="clearRejectForm">取消</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 修改密码弹窗 -->
    <div class="modal" v-if="showPasswordModal" @click="closePasswordModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>修改密码</h3>
          <button class="close-btn" @click="closePasswordModal">×</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="updatePassword">
            <div class="form-group">
              <label>旧密码 *</label>
              <input type="password" v-model="passwordForm.oldPassword" required placeholder="请输入旧密码">
            </div>
            <div class="form-group">
              <label>新密码 *</label>
              <input type="password" v-model="passwordForm.newPassword" required placeholder="请输入新密码">
            </div>
            <div class="form-group">
              <label>确认密码 *</label>
              <input type="password" v-model="passwordForm.confirmPassword" required placeholder="请确认新密码">
            </div>
            <div class="modal-footer">
              <button type="submit" class="submit-btn">确认修改</button>
              <button type="button" class="cancel-btn" @click="closePasswordModal">取消</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 图片查看器 -->
  <div v-if="isImageViewerVisible" class="image-viewer-overlay" @click.self="closeImageViewer">
    <div class="image-viewer-content">
      <button class="image-viewer-close" @click="closeImageViewer">&times;</button>
      <img 
        :src="currentViewImage" 
        :class="['image-viewer-img', { maximized: isMaximized }]" 
        :alt="'查看图片'"
        @click="toggleMaximizeImage"
      >
      <div class="image-viewer-footer">
        <button class="image-viewer-toggle" @click="toggleMaximizeImage">
          {{ isMaximized ? '原始大小' : '最大化' }}
        </button>
      </div>
    </div>
  </div>
  
  <!-- 退回作业弹窗 -->
  <div class="modal" v-if="showRejectModalFlag" @click="closeRejectModal">
    <div class="modal-content" @click.stop>
      <div class="modal-header">
        <h3>退回作业 - {{ currentRejectSubmission?.student?.name || '未知学生' }}</h3>
        <button class="close-btn" @click="closeRejectModal">×</button>
      </div>
      <div class="modal-body">
        <div class="submission-detail">
          <p><strong>作业名称：</strong>{{ currentRejectSubmission?.homework_name || currentRejectSubmission?.homework?.title }}</p>
          <p><strong>学生姓名：</strong>{{ currentRejectSubmission?.student?.name || '-' }}</p>
        </div>
        <form @submit.prevent="saveReject">
          <div class="form-group">
            <label>退回原因 *</label>
            <textarea 
              v-model="rejectForm.comment" 
              rows="4" 
              required
              placeholder="请输入退回原因（学生将看到此内容）"
            ></textarea>
            <p class="form-tip">退回后，作业评分为0分，学生可以重新提交。</p>
          </div>
          <div class="modal-footer">
            <button type="submit" class="submit-btn reject-confirm-btn">确认退回</button>
            <button type="button" class="cancel-btn" @click="closeRejectModal">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { api } from '@/utils/api.js';
import { showMessage, formatDate } from '@/utils/common.js';

export default {
  name: 'TeacherHome',
  data() {
        return {
          userInfo: {},
          classes: [],
          homeworks: [],
          submissions: [],
          gradeRankings: [],
          filters: {
            class_id: '',
            homework_id: ''
          },
          selectedClassId: '',
          currentClassRankings: [],
          classStudents: [], // 存储当前选中班级的学生列表
          submittedStudentIds: new Set(), // 存储已提交作业的学生ID列表
          loading: false,
          pollingInterval: null, // 轮询定时器ID
          lastUpdateTime: null, // 最后更新时间，用于检测新提交
          showPublishModal: false,
          publishForm: {
            class_id: '',
            name: '',
            content: '',
            deadline: ''
          },
          publishSelectedFile: null,
          publishPastedImages: [],
          showGradeModalFlag: false,
          currentSubmission: null,
          gradeForm: {
            score: null,
            comment: ''
          },
          // 作业详情页面的评分表单
          viewGradeForm: {
            score: null,
            comment: ''
          },
          showPasswordModal: false,
          passwordForm: {
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
          },
          // 作业查看相关
          showViewModal: false,
          currentViewSubmission: null,
          // 作业查看页面的退回表单
          viewRejectForm: {
            comment: ''
          },
          selectedRejectReason: '',
          rejectReasons: [
            { label: '完全错误退回', value: '完全错误退回' },
            { label: '学生要求退回', value: '学生要求退回' }
          ],
          // 退回作业相关
            showRejectModalFlag: false,
            currentRejectSubmission: null,
            rejectForm: {
              comment: ''
            },
          // 图片查看器相关
          isImageViewerVisible: false,
          currentViewImage: '',
          isMaximized: false
        };
      },
  computed: {
    /**
     * 计算年级排名，相同分数相同排名
     */
    calculatedGradeRankings() {
      const rankings = [...this.gradeRankings];
      // 确保数据已排序
      rankings.sort((a, b) => b.total_score - a.total_score);
      
      let currentRank = 1;
      let prevScore = null;
      
      return rankings.map((student, index) => {
        if (prevScore !== null && student.total_score !== prevScore) {
          currentRank = index + 1;
        }
        
        prevScore = student.total_score;
        
        return {
          ...student,
          displayRank: currentRank
        };
      });
    },
    
    /**
     * 计算班级排名，相同分数相同排名
     */
    calculatedClassRankings() {
      const rankings = [...this.currentClassRankings];
      // 确保数据已排序
      rankings.sort((a, b) => b.total_score - a.total_score);
      
      let currentRank = 1;
      let prevScore = null;
      
      return rankings.map((student, index) => {
        if (prevScore !== null && student.total_score !== prevScore) {
          currentRank = index + 1;
        }
        
        prevScore = student.total_score;
        
        return {
          ...student,
          displayRank: currentRank
        };
      });
    }
  },
  methods: {
    /**
     * 格式化日期
     */
    formatDate(date) {
      return formatDate(date);
    },
    
    /**
     * 初始化页面数据
     */
    async initData() {
      this.loading = true;
      try {
        // 获取用户信息
        this.userInfo = await api.getUserInfo();
        
        // 获取班级列表
        const classData = await api.getClasses();
        // 从返回对象中提取data.classes字段获取班级列表
        this.classes = classData.data?.classes || [];
        
        // 获取作业列表
        const homeworkData = await api.getHomeworks();
        this.homeworks = Array.isArray(homeworkData.data) ? homeworkData.data : [];
        
        // 获取年级排名
        const rankingsData = await api.getGradeRankings();
        this.gradeRankings = Array.isArray(rankingsData.data) ? rankingsData.data.slice(0, 10) : [];
        
        // 加载作业提交列表
        await this.loadSubmissions();
        
        // 启动轮询
        this.startPolling();
      } catch (error) {
        showMessage(error.message || '加载数据失败', 'error');
      } finally {
        this.loading = false;
      }
    },
    
    /**
     * 启动定时轮询，自动检查新的作业提交
     */
    startPolling() {
      // 清除已存在的定时器（如果有）
      if (this.pollingInterval) {
        clearInterval(this.pollingInterval);
      }
      
      // 设置定时器，每5秒检查一次新的作业提交
      this.pollingInterval = setInterval(() => {
        this.pollForNewSubmissions();
      }, 5000);
    },
    
    /**
     * 轮询检查新的作业提交
     */
    async pollForNewSubmissions() {
      try {
        // 只在页面可见时才进行轮询
        if (document.hidden) return;
        
        // 获取最新的作业提交列表
        const response = await api.getSubmissions(this.filters);
        const newSubmissions = Array.isArray(response) ? response : (response.data || []);
        
        // 检查是否有新的提交
        if (newSubmissions.length > 0) {
          // 如果是第一次更新或有新的提交
          if (!this.lastUpdateTime) {
            // 第一次更新，记录时间
            const latestSubmission = newSubmissions.reduce((latest, current) => 
              new Date(latest.submittedAt) > new Date(current.submittedAt) ? latest : current
            );
            this.lastUpdateTime = new Date(latestSubmission.submittedAt);
          } else {
            // 检查是否有新提交
            const hasNewSubmissions = newSubmissions.some(sub => 
              new Date(sub.submittedAt) > this.lastUpdateTime
            );
            
            if (hasNewSubmissions) {
              // 更新提交列表
              this.submissions = newSubmissions;
              // 更新最后更新时间
              const latestSubmission = newSubmissions.reduce((latest, current) => 
                new Date(latest.submittedAt) > new Date(current.submittedAt) ? latest : current
              );
              this.lastUpdateTime = new Date(latestSubmission.submittedAt);
              
              // 显示新提交提示
              showMessage('有新的作业提交，请查看', 'info');
            }
          }
        }
      } catch (error) {
        console.error('轮询失败:', error);
        // 轮询失败不显示错误消息，避免打扰用户
      }
    },
    
    /**
     * 加载作业提交列表
     */
    async loadSubmissions() {
      try {
        const response = await api.getSubmissions(this.filters);
        // 正确处理响应数据，响应拦截器已经处理了response.data
        this.submissions = Array.isArray(response) ? response : (response.data || []);
        
        // 更新最后更新时间
        if (this.submissions.length > 0) {
          const latestSubmission = this.submissions.reduce((latest, current) => 
            new Date(latest.submittedAt) > new Date(current.submittedAt) ? latest : current
          );
          this.lastUpdateTime = new Date(latestSubmission.submittedAt);
        }
        
        // 更新已提交作业的学生ID集合
        this.updateSubmittedStudentIds();
      } catch (error) {
        showMessage(error.message || '加载提交列表失败', 'error');
      }
    },
    
    /**
     * 更新已提交作业的学生ID集合
     * 当选择了特定作业时，标记已提交该作业的学生
     */
    updateSubmittedStudentIds() {
      this.submittedStudentIds.clear();
      
      // 只有当选择了特定作业时才需要标记
      if (this.filters.homework_id && this.submissions.length > 0) {
        this.submissions.forEach(submission => {
          if (submission.student?.id) {
            this.submittedStudentIds.add(submission.student.id);
          }
        });
      }
    },
    
    /**
     * 加载班级排名
     */
    /**
     * 处理班级筛选变化
     */
    async handleClassChange() {
      // 更新selectedClassId用于班级排名
      this.selectedClassId = this.filters.class_id;
      // 重新加载作业提交列表
      await this.loadSubmissions();
      // 如果选择了班级，加载班级排名和班级学生列表
      if (this.selectedClassId) {
        this.loadClassRankings();
        await this.loadClassStudents();
      } else {
        // 清空班级学生列表
        this.classStudents = [];
        this.submittedStudentIds.clear();
      }
    },
    
    /**
     * 加载指定班级的学生列表
     */
    async loadClassStudents() {
      if (!this.selectedClassId) return;
      
      try {
        const studentsData = await api.getClassStudents(this.selectedClassId);
        // 正确处理后端返回的数据结构: {data: {students: [...]}}
        this.classStudents = Array.isArray(studentsData.data?.students) ? studentsData.data.students : [];
        // 重新计算已提交作业的学生ID
        this.updateSubmittedStudentIds();
      } catch (error) {
        showMessage(error.message || '加载班级学生列表失败', 'error');
        this.classStudents = [];
      }
    },
    
    /**
     * 加载班级排名
     */
    async loadClassRankings() {
      if (!this.selectedClassId) return;
      
      try {
        const classRankResp = await api.getClassRankings(this.selectedClassId);
        this.currentClassRankings = classRankResp.data || [];
      } catch (error) {
        showMessage(error.message || '加载班级排名失败', 'error');
      }
    },
    
    /**
     * 关闭发布作业弹窗
     */
    closePublishModal() {
      this.showPublishModal = false;
      this.resetPublishForm();
    },
    
    /**
     * 重置发布表单
     */
    resetPublishForm() {
      this.publishForm = {
        class_id: '',
        name: '',
        content: '',
        deadline: ''
      };
      this.publishSelectedFile = null;
      this.publishPastedImages = [];
      if (this.$refs.publishFileInput) {
        this.$refs.publishFileInput.value = '';
      }
    },
    
    /**
     * 处理发布作业时的文件选择
     */
    handlePublishFileChange(event) {
      this.publishSelectedFile = event.target.files[0];
    },
    
    /**
     * 处理发布作业时的粘贴图片
     */
    handlePublishPaste(event) {
      const items = (event.clipboardData || event.originalEvent.clipboardData).items;
      for (let index in items) {
        const item = items[index];
        if (item.kind === 'file') {
          const blob = item.getAsFile();
          const reader = new FileReader();
          reader.onload = (event) => {
            this.publishPastedImages.push(event.target.result);
          };
          reader.readAsDataURL(blob);
        }
      }
    },
    
    /**
     * 发布作业
     */
    async publishHomework() {
      try {
        const formData = new FormData();
        formData.append('classId', this.publishForm.class_id);
        formData.append('title', this.publishForm.name);
        formData.append('content', this.publishForm.content);
        formData.append('deadline', this.publishForm.deadline);
        
        if (this.publishSelectedFile) {
          formData.append('file', this.publishSelectedFile);
        }
        
        if (this.publishPastedImages.length > 0) {
          formData.append('images', JSON.stringify(this.publishPastedImages));
        }
        
        await api.createHomework(formData);
        showMessage('作业发布成功', 'success');
        this.closePublishModal();
        
        // 重新加载作业列表
        const homeworksResp = await api.getHomeworks();
        this.homeworks = homeworksResp.data || homeworksResp;
      } catch (error) {
        showMessage(error.message || '发布失败', 'error');
      }
    },
    
    /**
     * 查看作业提交详情
     */
    viewSubmission(submission) {
      // 设置当前查看的作业提交信息并显示模态框
      this.currentViewSubmission = submission;
      // 初始化详情页面的评分表单
      this.viewGradeForm = {
        score: submission.score || null,
        comment: submission.comment || ''
      };
      this.showViewModal = true;
    },
    
    /**
     * 关闭作业查看模态框
     */
    closeViewModal() {
      this.showViewModal = false;
      this.currentViewSubmission = null;
      // 重置评分表单
      this.viewGradeForm = {
        score: null,
        comment: ''
      };
      // 重置退回表单
      this.clearRejectForm();
    },
    
    /**
     * 清除退回表单
     */
    clearRejectForm() {
      this.viewRejectForm = {
        comment: ''
      };
      this.selectedRejectReason = '';
    },
    
    /**
     * 根据班级ID获取班级名称
     * @param {string} classId - 班级ID
     * @returns {string} 班级名称
     */
    getClassName(classId) {
      if (!classId) return '';
      const cls = this.classes.find(c => c.id === classId);
      return cls ? cls.className : '未知班级';
    },
    
    /**
     * 处理退回原因选择变化
     */
    onRejectReasonChange() {
      // 当选择退回原因时，自动填充到退回原因框
      if (this.selectedRejectReason) {
        this.viewRejectForm.comment = this.selectedRejectReason;
      }
    },
    
    /**
     * 从作业详情页面保存退回作业
     */
    async saveRejectFromView() {
      try {
        // 验证退回原因
        if (!this.viewRejectForm.comment.trim()) {
          showMessage('请输入退回原因', 'error');
          return;
        }

        await api.rejectSubmission(this.currentViewSubmission.id, this.viewRejectForm);
        showMessage('作业退回成功', 'success');
        
        // 更新当前查看的提交记录状态
        this.currentViewSubmission.isRejectedRecord = true;
        this.currentViewSubmission.score = 0;
        this.currentViewSubmission.comment = this.viewRejectForm.comment;

        // 重新加载数据
        this.loadSubmissions();

        // 重新加载排名
        const gradeRankResp = await api.getGradeRankings();
        this.gradeRankings = Array.isArray(gradeRankResp.data) ? gradeRankResp.data.slice(0, 10) : [];

        if (this.selectedClassId) {
          this.loadClassRankings();
        }
        
        // 清除退回表单
        this.clearRejectForm();
      } catch (error) {
        console.error('退回作业失败:', error);
        showMessage(error.message || '退回作业失败', 'error');
      }
    },
    
    /**
     * 从作业详情页面保存评分
     */
    async saveGradeFromView() {
      try {
        // 验证评分
        if (this.viewGradeForm.score === null) {
          showMessage('请选择评分', 'error');
          return;
        }
        
        await api.gradeSubmission(this.currentViewSubmission.id, this.viewGradeForm);
        showMessage('评分保存成功', 'success');
        
        // 更新当前查看的提交记录
        this.currentViewSubmission.score = this.viewGradeForm.score;
        this.currentViewSubmission.comment = this.viewGradeForm.comment;
        
        // 重新加载数据
        this.loadSubmissions();
        
        // 重新加载排名
        const gradeRankResp = await api.getGradeRankings();
        this.gradeRankings = Array.isArray(gradeRankResp.data) ? gradeRankResp.data.slice(0, 10) : [];
        
        if (this.selectedClassId) {
          this.loadClassRankings();
        }
      } catch (error) {
        console.error('评分保存失败:', error);
        showMessage(error.message || '保存评分失败', 'error');
      }
    },
    
    /**
     * 设置预设评价内容
     */
    setCommentFromView(comment) {
      this.viewGradeForm.comment = comment;
    },
    
    /**
     * 显示评分弹窗
     */
    showGradeModal(submission) {
      this.currentSubmission = submission;
      this.gradeForm = {
        score: submission.score || null,
        comment: submission.comment || ''
      };
      this.showGradeModalFlag = true;
    },
    
    /**
     * 关闭评分弹窗
     */
    closeGradeModal() {
      this.showGradeModalFlag = false;
      this.currentSubmission = null;
      this.gradeForm = {
        score: null,
        comment: ''
      };
    },
    
    /**
     * 保存评分
     */
    async saveGrade() {
      try {
        // 验证评分是否在0-5之间
        if (this.gradeForm.score === null || this.gradeForm.score < 0 || this.gradeForm.score > 5) {
          showMessage('评分必须在0-5之间', 'error');
          return;
        }

        await api.gradeSubmission(this.currentSubmission.id, this.gradeForm);
        showMessage('评分保存成功', 'success');
        this.closeGradeModal();

        // 重新加载数据
        this.loadSubmissions();

        // 重新加载排名，确保响应数据格式正确
        const gradeRankResp = await api.getGradeRankings();
        this.gradeRankings = Array.isArray(gradeRankResp.data) ? gradeRankResp.data.slice(0, 10) : [];

        if (this.selectedClassId) {
          this.loadClassRankings();
        }
      } catch (error) {
        console.error('评分保存失败:', error);
        showMessage(error.message || '保存评分失败', 'error');
      }
    },

    /**
     * 显示退回作业弹窗
     */
    showRejectModal(item) {
      console.log('显示退回弹窗，作业ID:', item.id);
      this.currentRejectSubmission = item;
      this.rejectForm = {
        comment: ''
      };
      this.showRejectModalFlag = true;
    },

    /**
     * 关闭退回作业弹窗
     */
    closeRejectModal() {
      this.showRejectModalFlag = false;
      this.currentRejectSubmission = null;
      this.rejectForm = {
        comment: ''
      };
    },

    /**
     * 保存退回作业
     */
    async saveReject() {
      try {
        // 验证退回原因
        if (!this.rejectForm.comment.trim()) {
          showMessage('请输入退回原因', 'error');
          return;
        }

        await api.rejectSubmission(this.currentRejectSubmission.id, this.rejectForm);
        showMessage('作业退回成功', 'success');
        this.closeRejectModal();

        // 重新加载数据
        this.loadSubmissions();

        // 重新加载排名
        const gradeRankResp = await api.getGradeRankings();
        this.gradeRankings = Array.isArray(gradeRankResp.data) ? gradeRankResp.data.slice(0, 10) : [];

        if (this.selectedClassId) {
          this.loadClassRankings();
        }
      } catch (error) {
        console.error('退回作业失败:', error);
        showMessage(error.message || '退回作业失败', 'error');
      }
    },
    
    /**
     * 获取文件路径
     */
    getFilePath(path) {
      return `/api/uploads/${path}`;
    },
    
    /**
     * 更新密码
     */
    async updatePassword() {
      try {
        if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
          showMessage('两次输入的密码不一致', 'error');
          return;
        }
        
        await api.updatePassword(this.passwordForm);
        showMessage('密码修改成功', 'success');
        this.closePasswordModal();
      } catch (error) {
        showMessage(error.message || '密码修改失败', 'error');
      }
    },
    
    /**
     * 关闭密码修改弹窗
     */
    closePasswordModal() {
      this.showPasswordModal = false;
      this.passwordForm = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      };
    },
    
    /**
     * 解析图片数据并处理相对路径
     * @param {string|Array} imagesData - 图片数据字符串或数组
     * @returns {Array} 完整的图片URL数组
     */
    parseImages(imagesData) {
      if (!imagesData) return [];
      
      let images = [];
      
      // 尝试解析JSON字符串
      if (typeof imagesData === 'string') {
        try {
          images = JSON.parse(imagesData);
        } catch (e) {
          // 如果不是有效的JSON，直接将字符串作为单个图片路径
          images = [imagesData];
        }
      } else if (Array.isArray(imagesData)) {
        // 如果已经是数组，直接使用
        images = imagesData;
      }
      
      // 在生产环境中，确保所有图片路径指向后端服务器
      // 从api.js获取相同的基础URL逻辑
      const getApiBaseUrl = () => {
        return localStorage.getItem('apiBaseUrl') || 'http://127.0.0.1:3000';
      };
      
      return images.map(img => {
        // 如果已经是完整URL，则直接返回
        if (img.startsWith('http://') || img.startsWith('https://')) {
          return img;
        }
        // 如果是以'/'开头的相对路径，去掉开头的'/'再添加到基础URL后
        if (img.startsWith('/')) {
          return getApiBaseUrl() + img;
        }
        // 否则添加完整的基础URL前缀
        return getApiBaseUrl() + '/uploads/images/' + img;
      });
    },
    
    /**
     * 查看图片
     * @param {string} imageUrl - 图片URL
     */
    viewImage(imageUrl) {
      this.currentViewImage = imageUrl;
      this.isImageViewerVisible = true;
      this.isMaximized = false;
      // 防止页面滚动
      document.body.style.overflow = 'hidden';
    },
    
    /**
     * 关闭图片查看器
     */
    closeImageViewer() {
      this.isImageViewerVisible = false;
      // 恢复页面滚动
      document.body.style.overflow = 'auto';
    },
    
    /**
     * 切换图片最大化状态
     */
    toggleMaximizeImage() {
      this.isMaximized = !this.isMaximized;
    }
  },
  watch: {
    'filters.class_id': function(newVal) {
      // 当筛选的班级改变时，更新班级排名的选择
      if (newVal) {
        this.selectedClassId = newVal;
        this.loadClassRankings();
      }
    }
  },
  mounted() {
    this.initData();
  },
  
  /**
   * 组件卸载时清理资源，防止内存泄漏
   */
  beforeUnmount() {
    // 清理数据数组，释放内存
    this.submissions = [];
    this.classes = [];
    this.homeworks = [];
    this.classStudents = [];
    this.gradeRankings = [];
    this.currentClassRankings = [];
    // 清理事件监听器等其他可能导致内存泄漏的资源
    if (this._closeModalTimer) {
      clearTimeout(this._closeModalTimer);
      this._closeModalTimer = null;
    }
    // 组件卸载前的清理工作
    // 清除轮询定时器
    if (this.pollingInterval) {
      clearInterval(this.pollingInterval);
      this.pollingInterval = null;
    }
  }
};
</script>

<style scoped>
.teacher-home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-bar {
  background-color: #1E9FFF;
  color: white;
  padding: 15px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  font-size: 16px;
}

.publish-btn {
  background-color: white;
  color: #1E9FFF;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
}

.publish-btn:hover {
  background-color: #f0f9ff;
}

.change-pwd-btn {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-left: 15px;
  transition: all 0.3s;
}

.change-pwd-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.filter-bar {
  background-color: #f5f5f5;
  padding: 15px 20px;
  display: flex;
  gap: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-group label {
  color: #666;
  font-weight: 500;
}

.filter-group select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 150px;
  color: #333;
}

.content-wrapper {
  flex: 1;
  display: flex;
  padding: 20px;
  gap: 20px;
  overflow-y: auto;
}

.left-panel {
  flex: 3;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-header {
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.panel-header h3 {
  margin: 0;
  color: #333;
}

.submission-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.submission-table {
  width: 100%;
  border-collapse: collapse;
}

.submission-table th {
  background-color: #f5f5f5;
  padding: 12px;
  text-align: left;
  font-weight: 500;
  color: #666;
  border-bottom: 2px solid #e8e8e8;
}

.submission-table td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.score-cell {
  width: 80px;
}

.score {
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.scored {
  background-color: #f0f9ff;
  color: #1E9FFF;
}

.comment-cell {
  max-width: 200px;
}

.no-comment {
  color: #999;
  font-style: italic;
}

.view-btn,
.grade-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 5px;
  font-size: 12px;
  transition: all 0.3s;
}

.view-btn {
  background-color: #52c41a;
  color: white;
}

.view-btn:hover {
  background-color: #73d13d;
}

.grade-btn {
  background-color: #1890ff;
  color: white;
}

.grade-btn:hover {
  background-color: #40a9ff;
}

.reject-btn {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 4px 8px;
  margin-right: 5px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
}

.reject-btn:hover {
  background-color: #d32f2f;
}

.reject-confirm-btn {
  background-color: #f44336;
}

.reject-confirm-btn:hover {
  background-color: #d32f2f;
}

.form-tip {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
  font-style: italic;
}

.empty-tip {
  text-align: center;
  padding: 40px;
  color: #999;
}

.rank-section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.rank-section h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.class-selector {
  margin-bottom: 15px;
}

.class-selector select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333;
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 8px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.rank-num {
  width: 24px;
  height: 24px;
  background-color: #1E9FFF;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  margin-right: 10px;
}

.student-name {
  flex: 1;
}

.student-class {
  flex: 1;
  color: #666;
  font-size: 14px;
}

.total-score {
  font-weight: 500;
  color: #1E9FFF;
  min-width: 50px;
  text-align: right;
}

.no-class-selected {
  text-align: center;
  padding: 20px;
  color: #999;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 700px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.close-btn:hover {
  color: #333;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #666;
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

.form-group textarea {
  resize: vertical;
}

.paste-area {
  min-height: 100px;
  border: 1px dashed #ddd;
  border-radius: 4px;
  padding: 10px;
  cursor: text;
}

.paste-area:focus {
  outline: none;
  border-color: #1E9FFF;
}

.pasted-images {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pasted-img {
  max-width: 100px;
  max-height: 100px;
  border-radius: 4px;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.submit-btn {
  background-color: #1E9FFF;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #40A9FF;
}

.cancel-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.cancel-btn:hover {
  background-color: #f5f5f5;
}

/* 管理按钮样式 */
.manage-btn {
  display: inline-block;
  padding: 8px 16px;
  margin-left: 10px;
  background-color: #52c41a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s;
}

.manage-btn:hover {
  background-color: #73d13d;
}

/* 作业详情样式 */
.submission-detail {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.submission-detail p {
  margin: 8px 0;
}

.content-display {
  margin-top: 5px;
  padding: 10px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  word-break: break-word;
}

.file-link {
  margin-top: 10px;
}

.file-link a {
  color: #1E9FFF;
  text-decoration: none;
}

.file-link a:hover {
  text-decoration: underline;
}
/* 提交图片预览样式 */
.submission-images {
  margin-top: 15px;
}

/* 评分弹窗样式 */
.grade-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e8e8e8;
}

/* 评分选项样式 */
.score-options {
  display: flex;
  gap: 20px;
  margin: 10px 0;
}

.score-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.3s;
}

.score-option:hover {
  background-color: #f0f0f0;
}

.score-option input[type="radio"] {
  margin-right: 5px;
  cursor: pointer;
}

/* 评价选项按钮样式 */
  .comment-options {
    display: flex;
    gap: 10px;
    margin: 10px 0;
    flex-wrap: wrap;
  }

  .comment-option-btn {
    padding: 5px 15px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
  }

  .comment-option-btn:hover {
    background-color: #1E9FFF;
    color: white;
    border-color: #1E9FFF;
  }
  
  /* 退回作业样式 */
  .section-divider {
    height: 2px;
    background-color: #e0e0e0;
    margin: 20px 0;
  }
  
  .reject-section {
    margin-top: 20px;
  }
  
  .reject-options {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
  }
  
  .reject-option {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
  }
  
  .form-tip {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
    font-style: italic;
  }
  
  .reject-btn {
    background-color: #ff4d4f;
    border-color: #ff4d4f;
  }
  
  .reject-btn:hover {
    background-color: #ff7875;
  }

.images-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.preview-image {
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.preview-image:hover {
  border-color: #1e90ff;
  transform: scale(1.05);
}

.image-tip {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
  font-style: italic;
}

/* 图片查看器样式 */
.image-viewer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  padding: 20px;
}

.image-viewer-content {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.image-viewer-close {
  position: absolute;
  top: -40px;
  right: -40px;
  background: none;
  border: none;
  font-size: 32px;
  color: white;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.3s ease;
}

.image-viewer-close:hover {
  opacity: 0.8;
}

.image-viewer-img {
  max-width: 100%;
  max-height: 80vh;
  transition: all 0.3s ease;
  object-fit: contain;
  cursor: zoom-in;
  border: 2px solid transparent;
  border-radius: 4px;
}

.image-viewer-img.maximized {
  max-width: 100vw;
  max-height: 100vh;
  cursor: zoom-out;
}

.image-viewer-footer {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.image-viewer-toggle {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.image-viewer-toggle:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .image-viewer-close {
    top: -30px;
    right: 0;
    font-size: 24px;
  }
  
  .preview-image {
    max-width: 100px;
    max-height: 100px;
  }
}

/* 班级学生列表样式 */
.class-students-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.class-students-section h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.students-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.student-tag {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  color: #666;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
}

.student-tag:hover {
  background-color: #e0e0e0;
  transform: translateY(-1px);
}

.student-tag.submitted {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
  font-weight: 500;
}

.student-tag.submitted:hover {
  background-color: #c3e6cb;
}

.submitted-mark {
  background-color: #28a745;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* 内容显示样式 - 保留换行符 */
.content-display {
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5;
  padding: 10px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  min-height: 60px;
  font-size: 14px;
}

/* 评价选项和按钮布局 */
.comment-options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}
</style>